<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta
        http-equiv="Content-Type"
        content="text/html; charset=utf-8"
    />
    <title>粒子喷泉-放进村庄+开关</title>

    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>

    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <!-- 允许您将模型导入到场景中 -->
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <!-- 允许您使用触摸屏 -->
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    <!-- earcut算法 -->
    <script src="../../src/earcut.js"></script>
</head>

<body>
    <canvas
        id="renderCanvas"
        touch-action="none"
    ></canvas>
    <!-- 注意browseatouch-action="none"以获得PEPr/canvas调整大小事件的最佳效果 -->


    <script>
        const canvas = document.getElementById("renderCanvas"); //获取canvas元素
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        //在这里添加与playground格式匹配的代码
        const createScene = function () {
            const scene = new BABYLON.Scene(engine);
            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 1.5, Math.PI / 2.2, 15, new BABYLON.Vector3(0, 0, 0));
            camera.upperBetaLimit = Math.PI / 2.2;
            camera.attachControl(canvas, true);
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));


            //喷泉开关
            let switched = false;
            const pointerDown = (mesh) => {
                if (mesh === fountain) {
                    switched = !switched;
                    if (switched) {
                        // Start the particle system
                        particleSystem.start();
                    }
                    else {
                        // Stop the particle system
                        particleSystem.stop();
                    }
                }

            }

            scene.onPointerObservable.add((pointerInfo) => {
                switch (pointerInfo.type) {
                    case BABYLON.PointerEventTypes.POINTERDOWN:
                        if (pointerInfo.pickInfo.hit) {
                            pointerDown(pointerInfo.pickInfo.pickedMesh)
                        }
                        break;
                }
            });


            //喷泉剖面
            const fountainOutline = [
                new BABYLON.Vector3(0, 0, 0),
                new BABYLON.Vector3(0.5, 0, 0),
                new BABYLON.Vector3(0.5, 0.2, 0),
                new BABYLON.Vector3(0.4, 0.2, 0),
                new BABYLON.Vector3(0.4, 0.05, 0),
                new BABYLON.Vector3(0.05, 0.1, 0),
                new BABYLON.Vector3(0.05, 0.8, 0),
                new BABYLON.Vector3(0.15, 0.9, 0)
            ];


            // 粒子喷雾
            const particleSystem = new BABYLON.ParticleSystem("particles", 5000);
            //Texture of each particle
            particleSystem.particleTexture = new BABYLON.Texture("../../src/imgs/flare.png");
            // Where the particles come from
            particleSystem.emitter = new BABYLON.Vector3(-4, 0.8, -6); // emitted from the top of the fountain
            particleSystem.minEmitBox = new BABYLON.Vector3(-0.01, 0, -0.01); // Starting all from
            particleSystem.maxEmitBox = new BABYLON.Vector3(0.01, 0, 0.01); // To...
            // Colors of all particles
            particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
            particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
            // Size of each particle (random between...
            particleSystem.minSize = 0.01;
            particleSystem.maxSize = 0.05;
            // Life time of each particle (random between...
            particleSystem.minLifeTime = 0.3;
            particleSystem.maxLifeTime = 1.5;
            // Emission rate
            particleSystem.emitRate = 1500;
            // Blend mode : BLENDMODE_ONEONE, or BLENDMODE_STANDARD
            particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;
            // Set the gravity of all particles
            particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);
            // Direction of each particle after it has been emitted
            particleSystem.direction1 = new BABYLON.Vector3(-1, 8, 1);
            particleSystem.direction2 = new BABYLON.Vector3(1, 8, -1);
            // Power and speed
            particleSystem.minEmitPower = 0.2;
            particleSystem.maxEmitPower = 0.6;
            particleSystem.updateSpeed = 0.01;


            //创建喷泉
            const fountain = BABYLON.MeshBuilder.CreateLathe("fountain", { shape: fountainOutline, sideOrientation: BABYLON.Mesh.DOUBLESIDE });
            fountain.position.x = -4;
            fountain.position.z = -6;


            //天空盒
            const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 150 }, scene);
            const skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
            skyboxMaterial.backFaceCulling = false;
            skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("../../src/imgs/skybox/skybox", scene);
            skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
            skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
            skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
            skybox.material = skyboxMaterial;

            BABYLON.SceneLoader.ImportMeshAsync("", "../../src/models/", "valleyvillage.glb");


            return scene;

        }
        const scene = createScene(); //调用createScene函数

        //注册一个渲染循环来重复渲染场景
        engine.runRenderLoop(function () {
            scene.render();
        });

        // 注意浏览器、画布大小调整事件
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>

</html>